import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { ConfigProvider, theme } from 'antd'
import { store } from './store/store'
import { useAppSelector } from './store/hooks'
import zhCN from 'antd/locale/zh_CN'
// Ant Design 5.x 不需要导入 reset.css，样式已内置
import './index.css'
import App from './App.tsx'

const ThemedApp = () => {
  const themeMode = useAppSelector((state) => state.theme.mode)

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        algorithm: themeMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: themeMode === 'dark' ? '#177ddc' : '#1890ff',
          borderRadius: 4,
        },
      }}
    >
      <App />
    </ConfigProvider>
  )
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <ThemedApp />
    </Provider>
  </StrictMode>,
)
